<template>
  <div
    class="stores-table"
    style="
      flex: 1;
      padding: 20px;
      min-width: 0;
      background-color: #0e2f60;
      overflow-y: auto;
    "
  >
    <div class="store-top">
      <div class="type-view">
        <span>商家类型:</span>
        <el-select
          v-model="form.type"
          placeholder="请选择商家类型"
          @change="init(0)"
        >
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="type-view">
        <span>时间：</span>
        <el-select
          v-model="form.time"
          placeholder="请选择时间"
          @change="init(0)"
        >
          <el-option
            v-for="item in timeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="type-view">
        <span>排序类型：</span>
        <el-select
          v-model="form.order_by"
          placeholder="请选择类型"
          @change="init(0)"
        >
          <el-option
            v-for="item in orderByList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="type-view">
        <span>排序：</span>
        <el-select
          v-model="form.asc"
          placeholder="请选择排序"
          @change="init(0)"
        >
          <el-option
            v-for="item in ascList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <p>总商家数：{{total}}</p>
    <el-table :data="storesList" style="width: 100%" v-loading="loading">
      <el-table-column
        :prop="
          form.type == 1 || form.type == 3 ? 'store_info.store_id' : 'store_id'
        "
        label="序号"
      ></el-table-column>
      <el-table-column
        :prop="
          form.type == 1 || form.type == 3
            ? 'store_info.store_name'
            : 'store_name'
        "
        label="商家"
      ></el-table-column>
      <el-table-column
        :prop="form.type == 1 || form.type == 3 ? 'store_info.level' : 'level'"
        label="等级"
      >
        <template slot-scope="scope">
          <span v-if="form.type == 1 || form.type == 3">{{scope.row.store_info.level | filterLevel}}</span>
          <span v-else>{{scope.row.level | filterLevel}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="online_num" label="活跃人数"></el-table-column>
      <el-table-column prop="service_name" label="业绩客服"></el-table-column>
      <el-table-column
        prop="month_order_money"
        label="下单金额"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" class="btn" @click="onOpenPage('details',scope.row.store_id)">详情</el-button>
          <el-button size="mini" class="btn" @click="onOpenPage('slot',scope.row.store_id)">足迹</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" style="padding-bottom: 20px">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="30"
        :total="total"
        @current-change="init($event - 1)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      storesList: [],
      total: 500,
      form: {
        type: 1,
        time: "month",
        order_by: "add_time",
        asc: 1,
        page: 0,
        limit: 10,
      },
      typeList: [
        {
          value: 1,
          label: "活跃商家",
        },
        {
          value: 2,
          label: "未活跃商家",
        },
        {
          value: 3,
          label: "下单商家",
        },
        {
          value: 4,
          label: "活跃未下单商家",
        },
        {
          value: 5,
          label: "复购商家",
        },
      ],
      timeList: [
        {
          value: "today",
          label: "今日",
        },
        {
          value: "week",
          label: "本周",
        },
        {
          value: "lastWeek",
          label: "上周",
        },
        {
          value: "month",
          label: "本月",
        },
        {
          value: "lastMonth",
          label: "上月",
        },
        {
          value: "year",
          label: "今年",
        },
        {
          value: "lastYear",
          label: "去年",
        },
      ],
      orderByList: [
        {
          value: "add_time",
          label: "时间",
        },
        {
          value: "sort",
          label: "序号",
        },
        {
          value:"level",
          label:'等级'
        },
        {
          value:"online_num",
          label:"活跃人数"
        }
      ],
      ascList: [
        {
          value: 1,
          label: "升序",
        },
        {
          value: 2,
          label: "降序",
        },
      ],
    };
  },
  methods: {
    init(page) {
      this.form.page = page;
      this.$http(this.$ApiList.GetStoreTable, this.form).then((res) => {
        this.loading = false;
        this.storesList = res.datas;
        this.total = res.datas.length>0?res.datas[0].count:0
      });
    },
    onOpenPage(type,store_id){
      if(type === 'details'){
        let {href} = this.$router.resolve({path:'/store_list',query:{store_id}});
        window.open(href,"_blank")
      }else if(type === 'slot'){
        let {href} = this.$router.resolve({path:'/foot_activity',query:{store_id}});
        window.open(href,"_blank")
      }
    }
  },
  created() {
    this.init(0);
  },
  filters: {
			filterLevel(data){
				switch (data) {
					case 1:
						return 'A';
						break;
					case 2:
						return 'B';
						break;
					case 3:
						return 'C';
						break;
					case 4:
						return 'D';
						break;
					default:
            return '未设置'
						break;
				}
			}
		}
};
</script>
<style lang="scss">
.stores-table {
  .store-top {
    display: flex;
    margin-bottom: 10px;
    .type-view {
      flex: 1;
      > span {
        color: #fff;
        margin-right: 5px;
      }
      .el-input__inner {
        background-color: #001a52 !important;
        border-color: #00fbfc;
        color: #fff;
      }
      .el-select__caret {
        color: #fff !important;
      }
    }
  }
  >p{
    margin-bottom: 10px;
    text-align: right;
    color: #fff;
  }
  .el-table {
    background-color: transparent;
    &::before {
      background-color: #00fbfc;
    }
    tr {
      background-color: transparent;
    }
    &.el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: #0a3370 !important;
    }
    thead {
      position: relative;
      &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #00fbfc;
        z-index: 10;
      }
      &::after {
        content: "";
        position: absolute;
        top: 48px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #00fbfc;
        z-index: 10;
      }
      th {
        background-color: #001a52 !important;
        color: #fff;
      }
    }
    th.is-leaf,
    td {
      color: #fff;
      border-bottom: none;
    }
    .el-table__row {
      position: relative;
      background-color: transparent;
      td {
        border-bottom: solid 1px #00fbfc;
      }
    }
    .btn{
      background-color: #001a52;
      color: #fff;
      border-color: #00fbfc;
    }
  }
}
</style>